<template>
	<view class="outer_box">
		<view class="background">
			<!-- 用户信息 -->
			<view class="user-box"  v-if="loginState">
				<view class="user-info" @tap="jumpToout">
					<view class="">
						<image :src="userInfo.userInfo.image" mode=""></image>
					</view>
					<view class="">
						<view class="nick-name">{{userInfo.userInfo.nickName}}</view>
						<view class="phone">{{userInfo.userInfo.phone}}</view>
					</view>
				</view>
				<view class="member">
					<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/user/tuijian.png" @tap='openRecommend' mode=""></image>
				</view>


			</view>
			<view class="user-box" v-if="!loginState">
				<view class="user-info">
					<view class="">
						<image src='../../static/lipdee/mrtx@2x (1).png' mode=""></image>
					</view>
					<view class="" @tap="Jumplogin">
						<view class="nick-name">点击登录</view>
						<view class="phone">登录后享受更多精彩内容</view>
					</view>
				</view>
				<view class="member" v-if="loginState">
					<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/user/tuijian.png" @tap='openRecommend' mode=""></image>
				</view>
			
			
			</view>
			<view class="member-background" v-if="userInfo.userInfo.flag == 1">
				<!-- 背景图 -->
				<view class="member-box">
					<view class="">
						<text class="title">相伴商城会员</text>
					</view>
					<view class="">
						<view class="open" @tap="openMember">立即开通</view>
					</view>
				</view>
			</view>
			<view class="member-background" v-if="userInfo.userInfo.flag == 3" @tap="jumpmember">
				<!-- 背景图 -->
				<view class="member-box1">
					<view class="">
						<text class="title">会员余额：{{userInfo.userInfo.money}}</text>
					</view>
					<view class="">
						<view class="title">服务次数：{{userInfo.userInfo.serveNumber}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 订单 -->
		<view class="card">
			<view class="first">
				<view class="">我的订单</view>
				<view class="all-order">
					<view class="" @tap="openOrderList">全部订单</view>
					<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/shopingCart/qianjin.png" mode=""></image>
				</view>
			</view>
			<view class="second">
				<view class="status" @tap="orderList(-1)">
					<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/user/fukuan.png" mode=""></image>
					<view class="">待付款</view>
					<!-- <view class="icon-num">
						{{total1}}
					</view> -->
				</view>
				<view class="status" @tap="orderList(1)">
					<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/user/fahuo.png" mode=""></image>
					<view class="">待使用</view>
				</view>
				<view class="status" @tap="orderList(2)">
					<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/user/shouhuo.png" mode=""></image>
					<view class="">已完成</view>
				</view>
				<view class="status" @tap="orderList(9)">
					<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/user/tuikuan.png" mode=""></image>
					<view class="">退款</view>
				</view>
			</view>

		</view>
		<view class="">
			<view class="menu"  @tap="openMemberManage">
				<view class="title">
					<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/user/huiyuanico.png" mode=""></image>
					<view class="" style="color: #666666;">会员管理</view>
				</view>
				<view class="icon">
					<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/shopingCart/qianjin.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="menu" @tap='openAddressList'>
				<view class="title">
					<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/user/dizhi.png" mode=""></image>
					<view style="color: #666666;" class="">收货地址</view>
				</view>
				<view class="icon">
					<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/shopingCart/qianjin.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="menu" @tap="openFeedback">
				<view class="title">
					<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/user/fankui.png" mode=""></image>
					<view class="" style="color: #666666;">意见反馈</view>
				</view>
				<view class="icon">
					<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/shopingCart/qianjin.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import wybpopup from '@/components/wyb-popup/wyb-popup.vue'
	export default {
		components: {
			wybpopup
		},
		data() {
			return {
				total1:'',
			}
		},
		onShow() {
			this.getUserInfo()
			// this.getOrderList(-1)
		},
		computed: mapState(['userInfo','loginState']),
		methods: {
			...mapMutations(['login', 'logout','setUserInfo']),
			Jumplogin(){
				uni.navigateTo({
					url:'../login/login'
				})
			},
			jumpToout(){
				uni.navigateTo({
					url:'userInfomation'
				})
			},
			orderList(num){
				uni.navigateTo({
					url:'../order/order?num='+num
				})
			},
			jumpmember(){
				uni.navigateTo({
					url:'../member/member'
				})
			},
			//获取订单列表
			getOrderList(payState) {
			  console.log(payState)
			  let _this = this
			  this.$api.getOrderList({
			    orderStatus: payState
			  }, 1, 9999).then((res) => {
			    if (res.data.code == 200) {
			      console.log(res.data.total)
				  this.total1 = res.data.total
			    }
			  })
			},
			// 获取用户信息
			getUserInfo() {
				this.$api_http.getUserInfo().then((res) => {
					let userInfo = res.data.dataMap
					// this.getUserIn = res.data.dataMap
					console.log(userInfo)
					if(userInfo.uid==null){
						this.logout()
					}
					if (userInfo.uid !== null) {
						this.setUserInfo(userInfo)
					}
			
				})
			
			},
			openLogin(){
				uni.navigateTo({
					url:'../login/login'
				})
			},
			openRecommend(){
				uni.navigateTo({
					url:'../member/recommend'
				})
			},
			openMemberManage(){
				uni.navigateTo({
					url:'../member/member'
				})
			},
			openMember(){
				uni.navigateTo({
					url:'../member/openMember'
				})
			},
			openAddressList(){
				uni.navigateTo({
					url:'../address/addressList'
				})
			},
			openFeedback(){
				uni.navigateTo({
					url:'../feedback/feedback'
				})
			},
			openOrderList(){
				uni.navigateTo({
					url:'../order/order'
				})
			}

		}
	}
</script>

<style lang="less" scoped>
	.popup{
		width: 750rpx;
		height: 285rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		overflow: hidden;
		z-index: 9999;
		.popup_top{
			width: 690rpx;
			height: 70rpx;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 32rpx;
			font-weight: 400;
			color: #666666;
		}
		
		.paymentBtn{
			margin-top: 150rpx;
			background-color: #FF8308 ;
			width: 520rpx;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			font-size: 32rpx;
			font-weight: 500;
			color: #FFFFFF;
			border-radius: 45rpx;
		}
	}
	.outer_box {
		.menu {
			display: flex;
			width: 92%;
			margin:  0 auto;
			align-items: center;
			justify-content: space-between;
			margin-top: 50rpx;
			.title{
				display: flex;
				align-items: center;
				view{
					margin-left: 10rpx;
					font-size: 28rpx;
				}
			image {
				width: 38rpx;
				height: 38rpx;
			}	
			}
			.icon {
				display: flex;
				align-items: center;
				image {
					width: 15rpx;
				}
			}
		}

		.card {
			margin: 0 auto;
			padding: 30rpx;
			width: 84%;
			height: 180rpx;
			background: #FFFFFF;
			box-shadow: 0px 0px 20rpx 0px rgba(249, 105, 19, 0.16);
			border-radius: 12rpx;

			.first {
				display: flex;
				justify-content: space-between;
				font-size: 32rpx;
				font-weight: bolder;
				color: #333333;

				.all-order {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
				}

				image {
					margin-left: 10rpx;
					width: 9rpx;
					height: 18rpx;
				}
			}

			.second {
				display: flex;
				justify-content: space-around;
				margin-top: 30rpx;

				.status {
					display: flex;
					flex-direction: column;
					align-items: center;
					position: relative;
					.icon-num{
						width: 30rpx;
						height: 30rpx;
						color: #FFFFFF;
						background: #FFBD66;
						border-radius: 50%;
						position: absolute;
						left: 30rpx;
						top: -20rpx;
						}
					view {
						margin-top: 10rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #666666;
					}

					image {
						width: 48rpx;
						height: 48rpx;
					}
				}

			}
		}

		.background {
			width: 100%;
			height: 320rpx;
			background-image: url(https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/order/background.png);
			background-size: 100%;
			position: relative;
			margin-bottom: 30rpx;

			.member-background {
				position: absolute;
				bottom: -20%;
				left: 50%; //起始是在body中，横向距左50%的位置
				transform: translate(-50%, -50%); //水平、垂直都居中,也可以写成下面的方式

				.member-box {
					display: flex;
					align-items: center;
					background-image: url(https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/user/huiyuan.png);
					background-size: 100%;
					width: 690rpx;
					height: 130rpx;

					view:nth-child(1) {
						flex: 1;

						.title {
							margin-left: 40rpx;
							font-weight: bold;
							color: #FFEDBB;
							font-size: 36rpx;
						}

					}

					view:nth-child(2) {
						.open {
							font-size: 24rpx;
							margin-right: 40rpx;
							width: 160rpx;
							height: 60rpx;
							background: linear-gradient(90deg, #FEEAB3 0%, #FEE4A3 100%);
							border-radius: 30rpx;
							color: #333333;
							line-height: 60rpx;
							text-align: center;
						}
					}


				}
				.member-box1 {
					display: flex;
					align-items: center;
					background-image: url(https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/user/huiyuan.png);
					background-size: 100%;
					width: 690rpx;
					height: 130rpx;
				
					view:nth-child(1) {
						flex: 1;
				
						.title {
							margin-left: 40rpx;
							font-size: 28rpx;
							font-weight: 500;
							color: #FFEDBB;
						}
				
					}
				
					view:nth-child(2) {
						flex: 1;
										
						.title {
							margin-left: 40rpx;
							font-size: 28rpx;
							font-weight: 500;
							color: #FFEDBB;
						}
					}
				
				
				}
			}

			.user-box {
				display: flex;
				align-items: center;
				width: 94%;
				margin: 0 auto;

				.member {
					flex: 1;
					display: flex;
					justify-content: flex-end;
					align-items: center;
					margin-top: 40rpx;

					image {
						width: 200rpx;
						height: 60rpx;
					}
				}

				.user-info {
					display: flex;
					flex: 1;
					margin-top: 40rpx;

					view:nth-child(1) {
						display: flex;
						align-items: center;

						image {
							margin-right: 10rpx;
							width: 100rpx;
							height: 100rpx;
							border-radius: 50%;
						}
					}

					view:nth-child(2) {
						display: flex;
						flex-direction: column;
						justify-content: space-around;

						.nick-name {
							font-size: 32rpx;
							color: #fff;
						}

						.phone {
							color: #fff;
							font-size: 24rpx;
						}

					}
				}
			}
		}

	}
</style>
